<template>
	<view class="personal-wrap">
		<view class="user-head u-flex u-row-between">
			<view class="u-flex">
				<!-- 个人信息 -->
				<view class="info-box">
					<view class="u-flex">
						<view class="head-img-wrap">
							<image class="head-img"
								:src="userInfo.avatar || '/static/avatar.png'"
								mode="aspectFill"></image>
						</view>
						<view>
							<view class="user-name u-ellipsis-1">
								{{ userInfo.nikename || '请登录~' }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 金币余额 -->
		<view class="total-income u-flex u-row-between">
			<view class="income">
				<view>金币余额：</view>
				<view class="money"> {{userInfo.balance || '0.00'}}
				</view>
				<view>
					<text class="u-iconfont uicon-arrow-right u-m-l-10"
						style="color: #b66b26;font-size: 24rpx;"></text>
				</view>
			</view>
			<view class="btn"
				@click.stop="$Router.push('/pages/recharge/recharge')">充值金币</view>
		</view>
		<!-- 菜单 -->
		<view class="section">
			<view class="tit">常用功能</view>
			<view class="list">
				<button class="item u-flex u-row-between ss-reset-button"
					v-for="(item,index) in menuList"
					:key="index"
					@click="goPage(item)"
					:open-type="item.type == 'contact' ? 'contact' : ''">
					<image :src="item.icon"
						class="icon"></image>
					<view class="u-flex-1 name">
						{{item.name}}
					</view>
					<view>
						<uni-icons type="right"></uni-icons>
					</view>
				</button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				menuList: [{
					name: "开奖记录",
					icon: "/static/icon-1.png",
					url: "/pages/prize/log",
					type: ''
				}, {
					name: "联系客服",
					icon: "/static/icon-2.png",
					url: "",
					type: 'contact'
				}]
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo'])
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			...mapActions(['getUserInfo']),
			goPage(info) {
				if (info.url) {
					if (info.type == 'switchTab') {
						uni.switchTab({
							url: info.url
						})
					} else {
						this.$Router.push(info.url)
					}
				}
			}
		}
	}
</script>
<style lang="scss">
	.personal-wrap {
		background: #f6f6f6;
		width: 100%;
		min-height: 100vh;

		.section {
			margin: 40rpx 30rpx 0;
			background: #fff;
			border-radius: 20rpx;
			padding: 40rpx 40rpx 0;

			.tit {
				font-size: 32rpx;
				font-weight: 900;
			}

			.list {
				padding: 40rpx 0 0;

				.item {
					padding: 30rpx 0;
					border-top: 1px solid #f7f7f7;

					.icon {
						width: 36rpx;
						height: 36rpx;
						display: block;
					}

					.name {
						padding: 0 20rpx;
						text-align: left;
					}
				}
			}
		}

		.total-income {
			background-image: linear-gradient(to right, #f5ddd1, #f4d1b2);
			padding: 40rpx 30rpx;
			margin: 50rpx 30rpx 0;
			border-radius: 20rpx;
			color: #b66b26;
			font-weight: 900;
			font-size: 28rpx;

			.income {
				view {
					display: inline-block;
				}
			}

			.money {
				font-size: 40rpx;
				margin-left: 20rpx;
			}

			.btn {
				background: #fff;
				color: #bc9f77;
				padding: 8rpx 20rpx;
				border-radius: 400rpx;
				font-size: 28rpx;
			}
		}

		.user-head {
			width: 100%;
			padding-top: 50rpx;

			.info-box {
				padding-left: 30rpx;

				.head-img-wrap {
					position: relative;
				}

				.head-img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					background: #ccc;
					margin-right: 25rpx;
					overflow: hidden;
				}

				.user-name {
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
					line-height: 30rpx;
				}
			}
		}
	}
</style>